<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <title>淘宝网 -淘！我喜欢</title>
</head>

<body>
    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix layer">
        <ul class="fl">
            <li>
                <span>中国大陆</span>
                <span class="iconfont arrow">&#xe73a;</span>
            </li>
            <li class="mr7">
                <a href="#" class="login mr7">亲，请登录</a>
                <a href="#">免费注册</a>
            </li>
            <li>
                <a href="#">手机逛淘宝</a>
            </li>
        </ul>
        <ul class="fr">
            <li>
                <a href="#">我的淘宝</a>
                <span class="iconfont arrow">&#xe73a;</span>
            </li>
            <li>
                <span class="iconfont mr5 c4">&#xe505;</span>
                <a href="#">购物车</a>
                <strong>0</strong>
                <span class="iconfont arrow">&#xe73a;</span>
            </li>
            <li>
                <a href="#"><span class="iconfont mr5 store">&#xe602;</span>收藏夹</a>
                <span class="iconfont arrow">&#xe73a;</span>
            </li>
            <li>
                <a href="#">商品分类</a>
            </li>
            <li class="line">|</li>
            <li>
                <a href="#">千牛卖家中心</a>
                <span class="iconfont arrow">&#xe73a;</span>
            </li>
            <li>
                <a href="#">联系客服</a>
                <span class="iconfont arrow">&#xe73a;</span>
            </li>
            <li>
                <span class="iconfont c4 mr5">&#xe603;</span>
                <a href="#">网站导航</a>
                <span class="iconfont arrow">&#xe73a;</span>
            </li>
        </ul>
    </div>

    <!-- 头部广告 -->
    <div id="headAd">
        <div class="layer clearfix">
            <a href="#" class="fl go"><img src="images/go.png" alt=""></a>
            <ul class="fr">
                <!-- <li>
                        <a href="">
                            <a href="#"><img src="images/adimg_01.jpg" alt=""></a>
                            <h3> <a href="#">电视峰会</a></h3>
                            <p><a href="#">最高降2000</a></p>
                        </a>
                    </li> -->
                <li class="item1">
                    <a href="#" class="fr">
                        <img src="images/adimg_01.jpg" alt="">
                    </a>
                    <h3> <a href="#">电视峰会</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
                <li class="item2">
                    <a href="#" class="fr">
                        <img src="images/adimg_02.jpg" alt="">
                    </a>
                    <h3> <a href="#">电视峰会</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
                <li class="item3">
                    <a href="#" class="fr">
                        <img src="images/adimg_03.jpg" alt="">
                    </a>
                    <h3> <a href="#">电视峰会</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
                <li class="item4">
                    <a href="#" class="fr">
                        <img src="images/adimg_04.jpg" alt="">
                    </a>
                    <h3> <a href="#">电视峰会</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
                <li class="item5">
                    <a href="#" class="fr">
                        <img src="images/adimg_05.jpg" alt="">
                    </a>
                    <h3> <a href="#">电视峰会</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
            </ul>
        </div>
    </div>

    <!-- 头部搜索 -->
    <div id="headSearch">
        <div class="clearfix layer">
            <h1 class="fl"><a href="#">淘宝网</a></h1>
            <div class="code fr">
                <span class="iconfont close">&#xe50c;</span>
                <span class="c5">手机淘宝</span>
                <img src="images/code.png" alt="">
            </div>
            <div class="search">
                <ul class="searchTap clearfix">
                    <li class="active">宝贝</li>
                    <li>天猫</li>
                    <li>店铺</li>
                </ul>
                <div class="searchContent clearfix">
                    <form action="#">
                        <div class="searchBox fl">
                            <input type="text">
                            <div class="placeholder">
                                <i class="iconfont">&#xe641;</i>
                                <span> 四件套 水杯 蚊帐</span>
                            </div>
                            <span class="iconfont imgSearch">&#xe612;</span>
                        </div>
                        <div class="btn fl">
                            <button type="submit">搜索</button>
                        </div>
                    </form>
                </div>
                <div class="hotKey">
                    <a href="#" class="c5">网线</a>
                    <a href="#" class="c5">爬行垫</a>
                    <a href="#">时尚连衣裙</a>
                    <a href="#">男士T恤</a>
                    <a href="#" class="c5">时尚休闲裤</a>
                    <a href="#">粽子</a>
                    <a href="#">沙发</a>
                    <a href="#">风扇</a>
                    <a href="#">定制纱窗</a>
                    <a href="#">男士卫衣</a>
                    <a href="#">三件套</a>
                    <a href="#">办公桌</a>
                    <a href="#">椅子</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航 -->
    <div id="nav" class="layer clearfix">
        <h2 class="fl">主题市场</h2>
        <ul>
            <li class="size"><a href="#">天猫</a></li>
            <li class="size"><a href="#">聚划算</a></li>
            <li class="size"><a href="#">天猫超市</a></li>
            <li class="line">|</li>
            <li class="size"><a href="#">淘抢购</a></li>
            <li class="size"><a href="#">电器城</a></li>
            <li class="size"><a href="#">司法拍卖</a></li>
            <li class="size"><a href="#">淘宝心选</a></li>
            <li class="size"><a href="#">兴农扶贫</a></li>
            <li class="line">|</li>
            <li class="size"><a href="#">飞猪旅行</a></li>
            <li class="size"><a href="#">只能生活</a></li>
            <li class="size"><a href="#">苏宁易购</a></li>
        </ul>
    </div>

    <!-- 首屏 -->
    <div id="firstScreen" class="layer clearfix">
        <!-- 左侧内容 -->
        <div class="firstLeft fl">
            <!-- 侧边导航 -->
            <div class="sideNav fl">
                <ul>
                    <li>
                        <a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                    <li>
                        <a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span
                            class="iconfont fr">&#xe50e;</span>
                    </li>
                </ul>
            </div>

            <!-- 图片1容器 -->
            <div class="img1Box fr">
                <div class="pic fl">
                    <div class="img">
                        <a href="#"><img src="images/pic_01.jpg" alt=""></a>
                    </div>
                    <button class=" iconfont btnLeft">&#xe502;</button>
                    <button class=" iconfont btnRight">&#xe50e;</button>
                    <div class="circle">
                        <span class="active"></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>
                <div class="ad fr">
                    <a href="#"><img src="images/ad_02.jpg" alt=""></a>
                </div>
            </div>

            <!-- 图片2容器 -->
            <div class="img2Box fr">
                <div class="pic fl">
                    <div class="picTitle">
                        <div class="text clearfix">
                            <span class="fl bg">理想生活上天猫</span>
                            <span class="fr"><i>1</i>/6</span>
                        </div>
                        <div class="line">
                            <span></span>
                        </div>
                    </div>
                    <div class="img">
                        <a href="#"><img src="images/pic_02.jpg" alt=""></a><a href="#"><img src="images/pic_03.jpg"
                                alt=""></a>
                    </div>
                    <button class=" iconfont btnLeft">&#xe502;</button>
                    <button class=" iconfont btnRight">&#xe50e;</button>
                </div>
                <div class="ad fr">
                    <p class="title">今日热卖</p>
                    <a href="#"><img src="images/ad_03.jpg" alt=""></a>
                </div>
            </div>

            <!-- 淘宝头条 -->
            <div class="news fl">
                <div class="hd fl">
                    <h3>淘宝头条</h3>
                    <p>让你的生活更有趣</p>
                </div>
                <div class="newList fr">
                    <div class="item">
                        <a href="#" class="fl img"><img src="images/news_img_01.jpg" alt=""></a>
                        <h4><a href="#">微漫酱访谈第三期：超萌舞见弥音音！</a></h4>
                        <p><a href="#">哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞见小姐姐来做客我们的访谈事，她就是弥音音！</a></p>
                        <a href="#" class="more">更多></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="firstRight fr">
            <!-- 用户 -->
            <div class="user">
                <a href="#" class="avatar"><img src="images/avatar.jpg" alt=""></a>
                <p class="username">hi!你好</p>
                <p class="members">
                    <a href="#" class="gold">领淘金币抵钱</a>
                    <a href="#" class="club">会员俱乐部</a>
                </p>
                <div class="btn">
                    <button class="login">登录</button>
                    <button class="register">注册</button>
                    <button class="shop">开店</button>
                </div>
            </div>

            <!-- 举报 -->
            <a href="#" class="tipOff">
                <span>网上有害信息举报专区</span><i class="iconfont">&#xe64c;</i>
            </a>

            <!-- 公告区 -->
            <div class="notice">
                <ul class="title">
                    <li class="active"><a href="#">公告</a></li>
                    <li><a href="#">规则</a></li>
                    <li><a href="#">论坛</a></li>
                    <li><a href="#">安全</a></li>
                    <li><a href="#">公益</a></li>
                </ul>
                <ul class="content clearfix">
                    <li class="item1"><a href="#">天猫618进入热身 84个品牌在天猫共获粉丝4.3亿</a></li>
                    <li><a href="#">天猫618五折卖车</a></li>
                    <li><a href="#">天猫618直播间观看指南</a></li>
                </ul>
            </div>

            <!-- 图标区域 -->
            <table class="icon">
                <tr>
                    <td class="item1">
                        <a href="#">
                            <span></span>
                            <i>充话费</i>
                        </a>
                    </td>
                    <td class="item2">
                        <a href="#">
                            <span></span>
                            <i>旅行</i>
                        </a>
                    </td>
                    <td class="item3">
                        <a href="#">
                            <span></span>
                            <i>车险</i>
                        </a>
                    </td>
                    <td class="item4">
                        <a href="#">
                            <span></span>
                            <i>游戏</i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="item5">
                        <a href="#">
                            <span></span>
                            <i>彩票</i>
                        </a>
                    </td>
                    <td class="item6">
                        <a href="#">
                            <span></span>
                            <i>电影</i>
                        </a>
                    </td>
                    <td class="item7">
                        <a href="#">
                            <span></span>
                            <i>酒店</i>
                        </a>
                    </td>
                    <td class="item8">
                        <a href="#">
                            <span></span>
                            <i>理财</i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="item9">
                        <a href="#">
                            <span></span>
                            <i>找服务</i>
                        </a>
                    </td>
                    <td class="item10">
                        <a href="#">
                            <span></span>
                            <i>演出</i>
                        </a>
                    </td>
                    <td class="item11">
                        <a href="#">
                            <span></span>
                            <i>水电煤</i>
                        </a>
                    </td>
                    <td class="item12">
                        <a href="#">
                            <span></span>
                            <i>火车票</i>
                        </a>
                    </td>
                </tr>
            </table>

            <!-- APP -->
            <div class="app">
                <div class="app">
                    <div class="title cleafix">
                        <h3 class="fl">阿里APP</h3>
                        <a href="#" class="fr">更多></a>
                    </div>
                    <ul class="appIcon">
                        <li><a href="#"><img src="images/app_01.webp" alt=""></a></li>
                        <li><a href="#"><img src="images/app_02.png" alt=""></a></li>
                        <li><a href="#"><img src="images/app_03.png" alt=""></a></li>
                        <li><a href="#"><img src="images/app_04.png" alt=""></a></li>
                        <li><a href="#"><img src="images/app_05.png" alt=""></a></li>
                        <li><a href="#"><img src="images/app_06.png" alt=""></a></li>
                        <li><a href="#"><img src="images/app_07.jpg" alt=""></a></li>
                        <li><a href="#"><img src="images/app_08.png" alt=""></a></li>
                        <li><a href="#"><img src="images/app_09.png" alt=""></a></li>
                        <li><a href="#"><img src="images/app_10.png" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 好物与逛街 -->
    <div class="layer cleafix mt10">
            <!-- 有好货 -->
            <div class="goods fl">
                <div class="head cleafix">
                    <h3 class="fl">
                        <img src="images/goods.png" alt="有好货">
                        <span class="iconfont">&#xe628;</span>
                        <i>与品质生活不期而遇</i>
                    </h3>
                    <a href="#" class="fr change">换一换</a>
                </div>
                <ul class="list">
                    <li>
                        <a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
                        <h4><a href="#">max破产都要买的口红</a></h4>
                        <p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_02.jpg" alt=""></a>
                        <h4><a href="#">max破产都要买的口红</a></h4>
                        <p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_03.jpg" alt=""></a>
                        <h4><a href="#">max破产都要买的口红</a></h4>
                        <p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_04.jpg" alt=""></a>
                        <h4><a href="#">max破产都要买的口红</a></h4>
                        <p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_05.jpg" alt=""></a>
                        <h4><a href="#">max破产都要买的口红</a></h4>
                        <p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_06.jpg" alt=""></a>
                        <h4><a href="#">max破产都要买的口红</a></h4>
                        <p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
                        </a>
                    </li>
                </ul>
            </div>
    
            <!-- 爱逛街 -->
            <div class="goods fr shooping">
                <div class="head cleafix">
                    <h3 class="fl">
                        <img src="images/shopping.png" alt="有好货">
                        <span class="iconfont">&#xe628;</span>
                        <i>献给聪明可爱的你</i>
                    </h3>
                    <a href="#" class="fr change">换一换</a>
                </div>
                <ul class="list">
                    <li>
                        <a href="#"><img src="images/shop_img_07.jpg" alt=""></a>
                        <p class="text">
                            <span class="iconfont">&#xe66b;</span>
                            <a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
                        </p>
                        <a href="#" class="comment">
                            <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_08.jpg" alt=""></a>
                        <p class="text">
                            <span class="iconfont">&#xe66b;</span>
                            <a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
                        </p>
                        <a href="#" class="comment">
                            <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_09.jpg" alt=""></a>
                        <p class="text">
                            <span class="iconfont">&#xe66b;</span>
                            <a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
                        </p>
                        <a href="#" class="comment">
                            <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
                        <p class="text">
                            <span class="iconfont">&#xe66b;</span>
                            <a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
                        </p>
                        <a href="#" class="comment">
                            <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_10.jpg" alt=""></a>
                        <p class="text">
                            <span class="iconfont">&#xe66b;</span>
                            <a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
                        </p>
                        <a href="#" class="comment">
                            <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shop_img_11.jpg" alt=""></a>
                        <p class="text">
                            <span class="iconfont">&#xe66b;</span>
                            <a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
                        </p>
                        <a href="#" class="comment">
                            <span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    <!-- 右侧导航 -->
    <div id="tool">
            <span class="iconfont">&#xe605;</span>
            <div class="btn">
                <a href="#" class="c4 active">爱逛 好货</a>
                <a href="#" class="c5">好店 直播</a>
                <a href="#" class="c6">品质 特色</a>
                <a href="#" class="c7">实惠 热卖</a>
                <a href="#" class="c4">猜你 喜欢</a>
                <a href="#" class="item6">反馈</a>
                <a href="#" class="">暴恐 举报</a>
            </div>
    </div>
</body>

</html>